<template>

	<button :disabled="disabled" :loading="loading" :form-type="formType" :open-type="openType"
		:hover-start-time="hoverStartTime" :hover-stay-time="hoverStayTime"
		:hover-stop-propagation="hoverStopPropagation" :lang="lang" :session-from="sessionFrom"
		:send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :send-message-img="sendMessageImg"
		:show-message-card="showMessageCard" :group-id="groupId" :guild-id="guildId" :public-id="publicId" :style="[{
							width:$addUnit(width),
							height:$addUnit(heightCompute),
							color: colorCompute,
							background:backgroundCompute,
							border:borderCompute,
							fontSize:$addUnit(fontSize),
							position : positionCompute,
							zIndex : zIndexCompute,
							top : $addUnit(topCompute),
							left : $addUnit(leftCompute),
							bottom : $addUnit(bottomCompute),
							right : $addUnit(rightCompute),
							
							opacity:opacity,
							
							margin:marginCompute,
							marginTop:$addUnit(marginTop),
							marginLeft:$addUnit(marginLeft),
							marginBottom:$addUnit(marginBottom),
							marginRight:$addUnit(marginRight),
							
							padding:paddingCompute,
							
							borderRadius:$addUnit(borderRadiusCompute),
							},customStyle,defaultStyle]" @click.stop="click" @getphonenumber="getphonenumber" @getuserinfo="getuserinfo"
		@error="error" @opensetting="opensetting" @launchapp="launchapp" @contact="contact" @chooseavatar="chooseavatar"
		@addgroupapp="addgroupapp" @chooseaddress="chooseaddress" @chooseinvoicetitle="chooseinvoicetitle"
		@subscribe="subscribe" @login="login">
		<slot></slot>

	</button>
</template>

<script>
	/**
	 * button
	 * @description 自定义button
	 * @property {String} size 选值为default(默认)，mini(小尺寸)
	 * @property {String} type 按钮的样式类型 warn	,此时背景及字体颜色为红色
	 * @property {Boolean} plain 按钮是否镂空
	 * @property {Boolean} disabled 是否禁用
	 * @property {String} loading 名称前是否带 loading 图标	
	 * @property {String} formType 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
	 * @property {String} openType 开放能力
	 * @property {String} hoverClass 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果  App-nvue 平台暂不支持
	 * @property {String} hoverStartTime 按住后多久出现点击态，单位毫秒
	 * @property {String} hoverStayTime 手指松开后点击态保留时间，单位毫秒
	 * @property {String} hoverStopPropagation 选指定是否阻止本节点的祖先节点出现点击态 微信小程序
	 * @property {String} appParameter 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 微信小程序、QQ小程序
	 * @property {String} lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
	 * @property {String} sessionFrom 会话来源，open-type="contact"时有效	微信小程序
	 * @property {String} sendMessageTitle 会话内消息卡片标题，open-type="contact"时有效 微信小程序
	 * @property {String} background 背景色rgba(0, 0, 0, 0)
	 * @property {String} border  border 2rpx solid #005EF4
	 * @property {String} customStyle 自定义样式，字符串形式
	 * @property {Boolean} showCircula 两侧显示圆角
	 * @property {String} throttleTime 节流，一定时间内只能触发一次
	 * method confirm 点击事件
	 */
	export default {
		name: "cxButton",
		data() {
			return {
				marginValue: '',
				backgroundValue: '',
				colorValue: '',
				borderValue: '',
				paddingValue: ''


			};
		},
		computed: {
			defaultStyle() {
				let style = {};
				if (this.mini == true || this.size == 'mini') {
					// #ifndef APP-NVUE
					style.display = 'inline-flex';
					// #endif
					style.width = 'auto';

					style.justifyContent = 'center';
					style.alignItems = 'center';
				} else {
					style.display = 'flex';
					style.justifyContent = 'center';
					style.alignItems = 'center';
					style.flexWrap = 'wrap';
				}


				return style;
			},
			paddingCompute() {
				let arr = this.paddingValue.split(' ');
				for (var i = 0; i < arr.length; i++) {
					if (parseInt(arr[i]) > 0) {
						arr[i] = this.$addUnit(arr[i]);
					}
				}
				this.paddingValue = arr.join(' ');
				return this.paddingValue;
			},
			marginCompute() {
				let arr = this.marginValue.split(' ');
				for (var i = 0; i < arr.length; i++) {
					if (parseInt(arr[i]) > 0) {
						arr[i] = this.$addUnit(arr[i]);
					}
				}
				this.marginValue = arr.join(' ');
				return this.marginValue;
			},
			heightCompute() {

				return this.height
			},
			paddingTopCompute() {
				return this.paddingTopValue
			},
			paddingBottomCompute() {
				return this.paddingBottomValue
			},

			backgroundCompute() {

				if (this.type == "warn") {
					if (this.plain) {
						this.backgroundValue = "rgba(0, 0, 0, 0)";
					} else {
						this.backgroundValue = 'red';
					}
				} else {
					if (this.plain) {
						this.backgroundValue = "rgba(0, 0, 0, 0)";
					} else {
						this.backgroundValue = this.background;
					}
				}


				return this.backgroundValue;
			},
			colorCompute() {
				if (this.type == "warn") {
					if (this.plain) {
						this.colorValue = "red"
					} else {
						this.colorValue = "white"
					}
				}
				return this.colorValue;
			},

			borderCompute() {


				if (this.plain && this.type == "warn") {
					this.borderValue = "2rpx solid red"
				}

				if (this.plain) {
					let value = '2rpx solid ' + this.colorValue;

					this.borderValue = value;
				}

				return this.borderValue;
			},
			borderRadiusCompute() {
				let borderRadius = this.borderRadius;
				if (this.showCircula) {
					borderRadius = "50vh";
				}

				return borderRadius;
			},
			positionCompute: {
				get() {
					this.positionValue = this.position;
					return this.positionValue;
				},
				set(v) {
					this.positionValue = v;
				}

			},
			zIndexCompute: {
				get() {
					this.zIndexValue = this.zIndex;
					return this.zIndexValue;
				},
				set(v) {
					this.zIndexValue = v;
				}
			},
			topCompute: {
				get() {
					this.topValue = this.top;
					return this.topValue;
				},
				set(v) {
					this.topValue = v;
				}
			},
			leftCompute: {
				get() {
					this.leftValue = this.left;
					return this.leftValue;
				},
				set(v) {
					this.leftValue = v;
				}
			},
			bottomCompute: {
				get() {
					this.bottomValue = this.bottom;
					return this.bottomValue;
				},
				set(v) {
					this.bottomValue = v;
				}
			},
			rightCompute: {
				get() {
					this.rightValue = this.right;
					return this.rightValue;
				},
				set(v) {
					this.rightValue = v;
				}
			},



		},
		mounted() {
			// if (uni.$cx.checkString(this.paddingTop) && !uni.$cx.checkString(this.height) && !uni.$cx.checkString(this.size)) {
			// 	this.paddingTopValue = (this.height - this.fontSize * 2 - 10) / 2;
			// } else {
			// 	this.paddingTopValue = this.paddingTop;

			// }
			this.backgroundValue = this.background;
			this.colorValue = this.color;
			this.borderValue = this.border;
			this.marginValue = this.margin;
			this.paddingValue = this.padding;

		},


		props: {
			/**
			 * 父视图属性
			 */
			position: {
				type: String,
				default: ''
			},
			zIndex: {
				type: Number,
				default: 0
			},
			top: {
				type: [String, Number],
				default: ''
			},
			right: {
				type: [String, Number],
				default: ''
			},
			bottom: {
				type: [String, Number],
				default: ''
			},
			left: {
				type: [String, Number],
				default: ''
			},

			opacity: {
				type: [String, Number],
				default: ''
			},


			/**
			 * 项目属性开始
			 */





			/**
			 * 项目属性结束
			 */


			/**
			 * 子视图属性
			 */

			/**
			 * uni button 属性
			 */
			//可选值为default(默认)，mini(小尺寸)
			size: {
				type: String,
				default: ''

			},
			/**
			 * 小按钮，和size==mini效果相同
			 */
			mini: {
				type: Boolean,
				default: false
			},

			/**
			 * 按钮的样式类型
			 * warn	,此时背景及字体颜色为红色
			 * 
			 */
			type: {
				type: String,
				default: ''
			},
			// 按钮是否镂空
			plain: {
				type: Boolean,
				default: false
			},
			/**
			 * 是否禁用
			 */
			disabled: {
				type: Boolean,
				default: false
			},
			/**
			 * 名称前是否带 loading 图标	
			 */
			loading: {
				type: Boolean,
				default: false
			},
			/**
			 * 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
			 */
			formType: {
				type: String,
				default: ''
			},
			/**
			 * 开放能力
			 */
			openType: {
				type: String,
				default: ''
			},
			/**
			 * 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
			 * App-nvue 平台暂不支持
			 */
			// hoverClass: {
			// 	type: String,
			// 	default: 'button-hover'
			// },

			/**
			 * 按住后多久出现点击态，单位毫秒
			 */
			hoverStartTime: {
				type: [String, Number],
				default: '70'
			},
			/**
			 * 手指松开后点击态保留时间，单位毫秒
			 */
			hoverStayTime: {
				type: [String, Number],
				default: ''
			},
			/**
			 * 指定是否阻止本节点的祖先节点出现点击态
			 * 微信小程序
			 */
			hoverStopPropagation: {
				type: Boolean,
				default: true
			},
			/**
			 * 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
			 * 微信小程序、QQ小程序
			 */
			appParameter: {
				type: String,
				default: ''
			},
			/**
			 * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
			 */
			lang: {
				type: String,
				default: 'zh_CN'
			},
			/**
			 * 会话来源，open-type="contact"时有效	
			 * 微信小程序
			 */
			sessionFrom: {
				type: String,
				default: ''
			},
			/**
			 * 会话内消息卡片标题，open-type="contact"时有效
			 * 微信小程序
			 */
			sendMessageTitle: {
				type: String,
				default: ''
			},
			/**
			 * 当前分享路径
			 * 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
			 */
			sendMessagePath: {
				type: String,
				default: ''
			},
			/**
			 * 截图
			 * 会话内消息卡片图片，open-type="contact"时有效
			 */
			sendMessageImg: {
				type: String,
				default: ''
			},
			/**
			 * 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
			 */
			showMessageCard: {
				type: Boolean,
				default: false
			},
			/**
			 * 打开群资料卡时，传递的群号
			 * open-type="openGroupProfile"
			 * QQ小程序
			 */
			groupId: {
				type: String,
				default: ''
			},
			/**
			 * 打开频道页面时，传递的频道号
			 * open-type="openGuildProfile"
			 * QQ小程序
			 */
			guildId: {
				type: String,
				default: ''
			},
			/**
			 * 打开公众号资料卡时，传递的号码
			 * open-type="openPublicProfile"
			 * QQ小程序
			 */
			publicId: {
				type: String,
				default: ''
			},



			/**
			 * 以下属性来源于style属性
			 */
			/**
			 * button宽度
			 */
			width: {
				type: [String, Number],
				default: ''
			},
			/**
			 * 高度
			 */
			height: {
				type: [String, Number],
				default: '70'
			},
			/**
			 * 字体颜色
			 */
			color: {
				type: String,
				default: ''
			},
			/**
			 * 字体大小
			 */
			fontSize: {
				type: [String, Number],
				default: '24'
			},
			/**
			 * 背景色
			 * rgba(0, 0, 0, 0)
			 */
			background: {
				type: String,
				default: ''
			},
			/*
				border
			2rpx solid #005EF4
			*/

			border: {
				type: String,
				default: ''
			},
			borderBottom: {
				type: String,
				default: ''
			},
			borderTop: {
				type: String,
				default: ''
			},
			margin: {
				type: String,
				default: ''
			},
			marginTop: {
				type: [String, Number],
				default: ''
			},
			marginLeft: {
				type: [String, Number],
				default: ''
			},
			marginBottom: {
				type: [String, Number],
				default: ''
			},
			marginRight: {
				type: [String, Number],
				default: ''
			},

			padding: {
				type: String,
				default: '10'
			},
			// paddingTop: {
			// 	type: [String, Number],
			// 	default: ''
			// },
			// paddingLeft: {
			// 	type: [String, Number],
			// 	default: ''
			// },
			// paddingBottom: {
			// 	type: [String, Number],
			// 	default: ''
			// },
			// paddingRight: {
			// 	type: [String, Number],
			// 	default: ''
			// },

			borderRadius: {
				type: [String, Number],
				default: '12'
			},

			// 自定义样式，对象形式
			customStyle: {
				type: String,
				default: ''
				// type: Object,
				// default() {
				// 	return {	
				// 	};
				// }
			},



			// 两侧显示圆角
			showCircula: {
				type: Boolean,
				default: false
			},

			// 节流，一定时间内只能触发一次,
			throttleTime: {
				type: [String, Number],
				default: 1000
			},


		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		methods: {
			// 按钮点击
			click(e) {
				// 进行节流控制，每this.throttle毫秒内，只在开始处执行
				this.$u.throttle(() => {
					// 如果按钮时disabled和loading状态，不触发水波纹效果
					if (this.loading === true || this.disabled === true) return;

					this.$emit('confirm', e);

				}, this.throttleTime);


			},


			/**
			 * @param {Object} e
			 * open-type="getPhoneNumber"时有效
			 * 微信小程序
			 */
			getphonenumber(e) {
				this.$emit('getphonenumber', e);
			},

			/**
			 * @param {Object} e
			 * 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
			 * 微信小程序
			 */
			getuserinfo(e) {
				this.$emit('getuserinfo', e);
			},

			/**
			 * @param {Object} e
			 * 当使用开放能力时，发生错误的回调
			 * 微信小程序
			 */
			error(e) {
				this.$emit('error', e);
			},
			/**
			 * @param {Object} e
			 * 在打开授权设置页并关闭后回调
			 * 微信小程序
			 */
			opensetting(e) {
				this.$emit('opensetting', e);
			},
			/**
			 * @param {Object} e
			 * 打开 APP 成功的回调
			 * 微信小程序
			 */
			launchapp(e) {
				this.$emit('launchapp', e);
			},

			contact(e) {
				this.$emit('contact', e);
			},
			chooseavatar(e) {
				this.$emit('chooseavatar', e);
			},
			addgroupapp(e) {
				this.$emit('addgroupapp', e);
			},
			chooseaddress(e) {
				this.$emit('chooseaddress', e);
			},
			chooseinvoicetitle(e) {
				this.$emit('chooseinvoicetitle', e);
			},
			subscribe(e) {
				this.$emit('subscribe', e);
			},
			login(e) {
				this.$emit('login', e);
			},

		},

	}
</script>

<style>
	button {
		background: rgba(0, 0, 0, 0);
		margin: unset;
		padding: unset;
		line-height: 100% !important;
		/* text-align: center; */
		/* all: unset; */



	}

	button::after {
		border: none;

	}

	/* .u-hairline-border:after{
	    border: none;
	}*/
</style>